import { reactive } from 'vue'
import { genThemeTypeLevelColor } from '@/utils/color'

export const ThemeNameMap = {
    Default: 'default',
    White: 'white',
    Custom: 'custom'
}

export const themeList = reactive([
    {
        className: ThemeNameMap.Default,
        label: '默认',
        defaultCssVars: {
            ...genThemeTypeLevelColor('primary', '#3d89f4'),
            ...genThemeTypeLevelColor('success', '#13ce66'),
            ...genThemeTypeLevelColor('warning', '#ffb800'),
            ...genThemeTypeLevelColor('danger', '#ff4d4f'),
            ...genThemeTypeLevelColor('error', '#ff4d4f'),
            ...genThemeTypeLevelColor('info', '#a8c6df'),
            '--top-bar-bg-color': '#212844',
            '--top-bar-text-color': '#d6dadd',
            '--top-bar-nav-hover-bg-color': 'rgba(255, 255, 255, 0.15)',
            '--top-bar-nav-active-bg-color': 'rgba(255, 255, 255, 0)',
            '--top-bar-nav-active-text-color': '#3d89f4',
            '--el-menu-bg-color': '#333951',
            '--el-menu-hover-bg-color': '#292e41',
            '--el-menu-active-color': '#fff',
            '--el-menu-active-bg-color': '#191c28',
            '--el-menu-text-color': '#a5adb4'
        }
    },
    {
        className: ThemeNameMap.White,
        label: '简白',
        defaultCssVars: {
            ...genThemeTypeLevelColor('primary', '#50aeff'),
            ...genThemeTypeLevelColor('success', '#67c23a'),
            ...genThemeTypeLevelColor('warning', '#e6a23c'),
            ...genThemeTypeLevelColor('danger', '#f56c6c'),
            ...genThemeTypeLevelColor('error', '#f56c6c'),
            ...genThemeTypeLevelColor('info', '#909399'),
            '--top-bar-bg-color': '#fff',
            '--top-bar-text-color': '#606266',
            '--top-bar-nav-hover-bg-color': '#e9f0ff',
            '--top-bar-nav-active-bg-color': '#e9f0ff',
            '--top-bar-nav-active-text-color': '#50aeff',
            '--el-menu-active-bg-color': '#EDF1FF'
        }
    },
    {
        className: ThemeNameMap.Custom,
        label: '自定义',
        defaultCssVars: {}
    }
])